<template>
	<view class="Personal">
		<!-- 信息部分 -->
		<view class="information flex" :style="{paddingTop: `${getSystemInfo.statusBarTop}rpx`}">
			<view class="info-img">
				<image class="width-height100 radius100" :src="infoData.headImg" mode=""></image>
			</view>
			<view class="margin-bo">
				<view class="font-weight-600 color-f size-34">{{infoData.realName || '游客'}}</view>
				<view class="phone font-weight-400 color-f size-26">{{infoData.telephone}}</view>
				<view class="font-weight-400 color-f size-26 flex">
					<text class="colorb9">服务小区：</text>
					<view class="name-width colorb9">
						<text v-for="(item,index) in communityList" :key="index" class="margin-right5">
							{{item.communityName || '-'}}
						</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="withdrawal"> -->
		<!-- 提现余额 -->
		<navigator url="/packagePerson/account/account" hover-class="none" class="balance dis-cen margin-bottom-16">
			<view class="dis-ali">
				<image class="balance-img" src="@/static/icon/tx.png" mode=""></image>
				<text class="wable font-weight-600 size-28">可提现</text>
			</view>
			<view class="dis-ali">
				<view class="font-weight-600 price-font"><text class="size-32">¥</text>22,382</view>
				<text class="margin-left-12 iconfont icon-right-1-copy size-30"></text>
			</view>
		</navigator>
		<!-- 操作 -->
		<!-- 			<view class="operate radius12 f-background">
				<view class="operate-padding dis-cen border-bottom">
					<view class="operate-item dis-ali">
						<image class="operate-img" src="@/static/icon/tz.png" mode=""></image>
						<text class="font-weight-600 color3 size-30">联系团长</text>
					</view>
					<text class="margin-left-12 iconfont icon-right-1-copy color9 size-30"></text>
				</view>
				<view class="operate-padding dis-cen">
					<view class="operate-item dis-ali">
						<image class="operate-img" src="@/static/icon/sz.png" mode=""></image>
						<text class="font-weight-600 color3 size-30">账号管理</text>
					</view>
					<text class="margin-left-12 iconfont icon-right-1-copy color9 size-30"></text>
				</view>
			</view> -->
	</view>
	</view>
</template>

<script>
	import { IndexDelivery } from '@/api/index'
	import { getSystemInfo } from '@/utils/index';
	export default {
		components: {},
		data() {
			return {
				getSystemInfo: getSystemInfo(), // 顶部自定义导航数据
				infoData: {},
				communityList: []
			}
		},
		onShow() {
			this.postIndexDelivery()
		},
		methods: {
			async postIndexDelivery() {
				const { code, data } = await IndexDelivery()
				if (code == "200") {
					this.infoData = data.deliveryPerson
					this.communityList = data.communityList || []
				}
			}
		}
	}
</script>

<style lang="scss">
	.Personal {
		.margin-right5 {
			margin-right: 12rpx;
		}

		// 信息部分
		.information {
			padding: 0 14rpx 114rpx 48rpx;
			background: #2E2E2E;
			box-sizing: border-box;

			.margin-bo {
				padding-top: 14rpx;

				.phone {
					padding-top: 2rpx;
					margin-bottom: 8rpx;
				}

				.colorb9 {
					color: #B9B9B9;
				}
			}

			.info-img {
				width: 108rpx;
				height: 108rpx;
				margin-right: 24rpx;
			}

			.name-width {
				width: 400rpx;
			}
		}


		.withdrawal {
			padding: 0 20rpx;
			margin-top: -66rpx;

			// 提现余额
			.balance {
				color: #844931;
				padding: 30rpx 28rpx;
				background: linear-gradient(180deg, #FFF4E7 37%, #FFEBE1 100%);
				border-radius: 20rpx;
				border: 2rpx solid #F7CFB9;
				// border-image: #;
				font-size: 58rpx;

				.icon-right-1-copy {
					color: #844931;
				}

				.balance-img {
					width: 68rpx;
					height: 68rpx;
					margin-right: 16rpx;
				}
			}

			// 操作
			.operate {
				padding-left: 46rpx;

				.operate-padding {
					padding: 38rpx 30rpx 40rpx 0;
				}

				.operate-item {
					margin-left: -8rpx;

					.operate-img {
						width: 36rpx;
						height: 36rpx;
						margin-right: 28rpx;
					}
				}
			}
		}
	}
</style>